<DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #app{
            width: 600px;
            margin: 0 auto;
        }
    </style>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
    <div id="app">
        <fieldset>
            <legend>
                Create New Person
            </legend>
            <form action="" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">Name:</label>
                    <input class="layui-input layui-input-inline" v-model="newPerson.name" type="text" placeholder="input a name">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Age:</label>
                    <input class="layui-input layui-input-inline" v-model="newPerson.age" type="text" placeholder="input a number">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Sex:</label>
                    <div class="layui-input-inline">
                        <select name="sex" v-model="newPerson.sex">
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <input type="button" class="layui-btn layui-btn-normal" @click="createPerson" value="Create">
                </div>
            </form>
        </fieldset>

        <table class="layui-table" lay-even="">
            <colgroup>
                <col width="150">
                <col width="100">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(k,index) in people">
                    <td>{{k.name}}</td>
                    <td>{{k.age}}</td>
                    <td>{{k.sex}}</td>                    
                    <td><button @click="deletePerson"  class="layui-btn layui-btn-danger layui-btn-small">delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>


    <script src="vue.min.js"></script>
    <script src="layui/layui.js"></script>
    <script src="table.js"></script>
</body>
</html>